<template>
    <div class="page">
        <el-card shadow="never">
            <el-form
                :model="form"
                label-position="right"
                label-suffix=":"
                label-width="140px"
                ref="form"
                :rules="rules">
                <el-form-item label="勋章课程小节名称" prop="name">
                    <el-input
                        v-model="form.name"
                        placeholder="请输入勋章课程小节名称"
                    ></el-input>
                </el-form-item>
                <el-form-item label="勋章课程小节描述" prop="describe">
                    <el-input v-model="form.describe" placeholder="请输入勋章课程小节描述" ></el-input>
                </el-form-item>
                <el-form-item label="勋章课程小节类型" required>
                    <el-radio-group v-model="form.type">
                        <el-radio :label="2">文章</el-radio>
                        <el-radio :label="1">视频</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="勋章课程小节视频" v-if="form.type === 1" required>
                    <div class="flex items-center">
                        <VideoUpload
                            v-model="form.video"
                            ref="videoUpload"
                            :accept="'.mp4,.rmvb,.avi'"
                            :disabled="uploading"
                            @next="next"
                            @complete="complete">
                            <el-button :loading="uploading" type="primary">上传</el-button>
                            <el-button @click.stop="cannel" type="primary" v-if="uploading">取消上传</el-button>
                        </VideoUpload>
                        <span class="mr-2 ml-2">或</span>
                        <el-input
                            @input="videoUrlChange"
                            v-model="form.video"
                            placeholder="请输入视频链接地址"
                            class="input-width"
                        ></el-input>
                        <span v-if="!videoChange" class="ml-2 my-auto">{{ form.transcoding_status }}</span>
                        <el-tag v-if="!videoChange" class="ml-2 my-auto">
                            {{ form.transcoding_at | transcodingTime }}
                        </el-tag>
                    </div>
                </el-form-item>
                <el-form-item label="内容" prop="content">
                    <tinymce v-model="form.content"></tinymce>
                </el-form-item>
            </el-form>
            <div class="text-center">
                <el-button :loading="posting || uploading" type="primary" @click="onSave">
                    {{ form.type === 2 && videoChange ? '保存并转码' : '保存' }}
                </el-button>
                <el-button @click="onBack">返回</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
import TimeFormats from '@/helpers/TimeFormats';
import VideoUpload from '@/components/base/VideoUpload';
import Tinymce from '@/components/base/Tinymce';

export default {
    components: {
        Tinymce,
        VideoUpload,
    },
    data() {
        return {
            posting: false,
            uploading: false,
            form: {
                merit_chapter_id: '',
                name: '',
                content: '',
                type: 2,
                video: '',
                qiniu_key: '',
            },
            id: this.$route.params.id,
            rules: {
                name: [
                    { required: true, message: '请输入勋章课程小节名称', trigger: 'blur' },
                ],
            },

            uploadParams: {
                qiniu_key: '',
                video: '',
            },
            videoChange: false,
        };
    },
    filters: {
        transcodingTime(time) {
            if (!time) return '';
            return `发起转码时间: ${new TimeFormats().convertTime('', time)}`;
        },
    },
    methods: {
        onSave() {
            this.$refs.form.validate(async (valid) => {
                if (!valid) return;
                if (this.form.type === 1 && !this.form.video) return $ele.$message.warning('请上传视频或输入视频链接');
                if (this.form.content.length > 20000) return $ele.$message.warning('内容过长');

                this.posting = true;
                const api = this.id ? 'put' : 'post';
                API[api]('merit_section', this.form).then(() => {
                    $ele.$message.success(`${this.id ? '编辑' : '新增'}成功`);
                    this.onBack();
                }).finally(() => this.posting = false);
            });
        },
        fetchData() {
            if (this.id) {
                API.get(`merit_section/${this.id}`).then((res) => {
                    this.form = res;
                });
            }
        },
        cannel() {
            this.$refs.videoUpload.unsubscribe();
            this.form.video = '';
            this.uploading = false;
        },
        next() {
            this.uploading = true;
        },
        complete(e) {
            this.uploadParams = {
                qiniu_key: e.form.key,
                video: e.access_url,
            };
            this.form.qiniu_key = e.form.key;
            this.uploading = false;
            this.videoChange = true;
        },

        videoUrlChange(e) {
            const params = this.uploadParams;
            if (!params.qiniu_key) return;

            if (params.video !== e) {
                this.form.qiniu_key = '';
            } else {
                this.form.qiniu_key = params.qiniu_key;
            }

            this.videoChange = params.video === e;
        },

        onBack() {
            this.$router.back();
        },
    },
    mounted() {
        this.form.merit_chapter_id = this.$route.query.chapterid;
        this.fetchData();
    },
};
</script>

<style lang="scss" scoped>
.input-width {
    width: 300px;
}
.picture {
    width: 200px;
    height: 200px;
    line-height: 200px;
}
.uploader-icon {
    font-size: 20px;
    color: #8c939d;
    text-align: center;
}
.image-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.video-upload {
    text-align: center;
}

.section-detail-page .text-center button.el-button {
    width: auto;
}
</style>
